<template>
  <el-dialog v-model="dialogVisible"  width="900px" append-to-body>
       <Title title="队伍详情" />
    <div class="dialog-container">
      <!-- 基本信息区域 -->
      <div class="basic-info-section">
        <h3 class="section-title">基本信息</h3>
        <el-descriptions :column="2" border label-width="80" class="fixed-width-descriptions">
          <el-descriptions-item :span="2" v-if="teamData.group" label="所属分组">{{ teamData.group?.groupName }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="毕设名称">{{ teamData.teamName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="毕设简介" :span="2">
            <div class="summary-content">{{ teamData.summary || '-' }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 指導老師区域 -->
      <div class="teachers-section" v-if="isTeacher">
        <h3 class="section-title">指导老师</h3>
        <el-table :data="sortedTeachers" border style="width: 100%">
          <el-table-column label="志愿序号" align="center" width="100">
            <template #default="{ row }">{{ teamCode(row.sort) }}</template>
          </el-table-column>
          <el-table-column label="教师姓名" align="center" prop="teacher.user.nickName" />
          <el-table-column label="工号" align="center" prop="teacher.teachId" />
          <el-table-column label="专业领域" align="center" prop="teacher.majorField" />
          <el-table-column label="是否选中" align="center">
            <template #default="{ row }">
              {{ row.selectFlag == '1' ? '是' : '否' }}
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-if="!sortedTeachers.length" description="暂无指导老师" :image-size="80" />
      </div>

      <!-- 队伍成员区域 -->
      <div class="members-section">
        <h3 class="section-title">队伍成员</h3>
        <el-table :data="sortedStudents" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column label="角色" align="center" width="100">
            <template #default="{ row }">
              <el-tag :type="row.isLeader === '1' ? 'warning' : 'success'" size="small">
                {{ row.isLeader === '1' ? '队长' : '队员' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="student.user.nickName" />
          <el-table-column label="学号" align="center" prop="student.stuId" />
          <el-table-column label="邮箱" align="center" prop="student.email" />
        </el-table>
        <el-empty v-if="!sortedStudents.length" description="暂无队伍成员" :image-size="80" />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close" class="defaultButton">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import Title from '@/components/Title'

const dialogVisible = ref(false)
const teamData = ref({})
const isTeacher = ref(true)

// 排序后的教师列表（按志愿序号排序）
const sortedTeachers = computed(() => {
  if (!teamData.value.teamTeachers) return []
  return [...teamData.value.teamTeachers].sort((a, b) => a.sort - b.sort)
})

// 排序后的学生列表（队长在前）
const sortedStudents = computed(() => {
  if (!teamData.value.studentTeams) return []
  return [...teamData.value.studentTeams].sort((a, b) => {
    // 队长（isLeader='1'）排在前面
    if (a.isLeader === '1' && b.isLeader !== '1') return -1
    if (a.isLeader !== '1' && b.isLeader === '1') return 1
    return 0
  })
})


const openDialog = (teamInfo,teacher=true) => {
  teamData.value = teamInfo || {}
  isTeacher.value = teacher
  dialogVisible.value = true
}

const close = () => {
  dialogVisible.value = false
}

defineExpose({ openDialog })
</script>

<style scoped>
.dialog-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: var(--el-color-primary);
  border-radius: 2px;
}

.summary-content {
  max-height: 80px;
  overflow-y: auto;
  line-height: 1.5;
}

.teachers-section,
.members-section {
  width: 100%;
}

.summary-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 滚动条样式 */
.summary-content::-webkit-scrollbar {
  width: 4px;
}

.summary-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.summary-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.summary-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 让 descriptions 两列等宽，长内容自动断行 */
.fixed-width-descriptions :deep(.el-descriptions__table) {
  width: 100%;
  table-layout: fixed;
}
.fixed-width-descriptions :deep(.el-descriptions__label),
.fixed-width-descriptions :deep(.el-descriptions__content) {
  word-break: break-word;
  white-space: normal;
}
</style>
